<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<fieldset>
			<legend>记录列表</legend>
			<br>
				<div>
					姓名：
					<input type="text" id="name" placeholder="姓名"><br>

					性别：
					<input type= "radio" name='sex' id='sex1' checked  value="男"/>
					<label for="sex1">男</label>
					<input type="radio" name= 'sex' id='sex2' value="女"/>
					<label for="sex2">女</label><br>
	
					爱好：
					<input type="checkbox" name="habit" id="habit_h1" value="唱歌"/>
					<label for="habit_h1">唱歌</label>
					<input type="checkbox" name="habit" id="habit_h2" value="跑步"/>
					<label for="habit_h2">跑步</label>
					<input type="checkbox" name="habit" id="habit_h3" value="游泳"/>
					<label for="habit_h3">游泳</label><br>

					地址：
					<select id="address">
						<option selected>北京</option>
						<option>上海</option>
						<option>南京</option>
						<option>天津</option>
					</select><br>
					
					<button onclick="testadd()">添加</button><br><br>
					
					姓名：
					<input type="text" id="name2" placeholder="姓名">
					地址：
					<select id="address2">
						<option selected>北京</option>
						<option >上海</option>
						<option >南京</option>
						<option >天津</option>
					</select>
					<button onclick="testselect()">搜索</button><br><br>
				</div>
				<table style="border:1px solid black; width:1000px;" >
					<thead>
						<tr>
							<th style="width: 10%; text-align: left;">ID</th>
							<th style="width: 20%; text-align: left;">姓名</th>
							<th style="width: 15%; text-align: left;">性别</th>
							<th style="width: 25%; text-align: left;">爱好</th>
							<th style="width: 10%; text-align: left;">地址</th>
							<th style="width: 20%; text-align: left;">操作</th>
						</tr>
					</thead>
					<tbody id="tbody"></tbody>
				</table>
			
		</fieldset>
			
		<script type="text/javascript">
			var id = 1;
			
			var checkboxs = document.getElementsByName("habit");
			var myselect = document.getElementById("address");
			var radios = document.getElementsByName("sex");
			
			function testadd(){
				var name = document.getElementById("name").value;			
				var sex = getSex(radios);
				var habit = getHabit(checkboxs);
				var address = getAddress(myselect);
				
				
				var html = ""
					+"<tr>"
					+"<td>"+ id++ +"</td>"
					+"<td>"+ name +"</td>"
					+"<td>"+ sex +"</td>"
					+"<td>"+ habit +"</td>"
					+"<td>"+ address +"</td>"
					+"<td><a href ='javascript:;' onclick='testdel(this)'>删除</a> <a href ='javascript:;' onclick='testupdate(this)'>修改</a></td>"
					+"</tr>";
					
				var tbody = document.getElementById("tbody");
				tbody.innerHTML += html;	
			}
			
			function getSex(radios){
				var sex;
				for(var i = 0;i<radios.length;i++){
					if(radios[i].checked){
						sex = radios[i].value;
					}
				}
				return sex;
			}
			
			function getHabit(checkboxs){
				var thabit = new Array();
				for(var i = 0,j = 0;i<checkboxs.length;i++){
					if(checkboxs[i].checked){
						thabit[j] = checkboxs[i].value;
						j++;
					}
				}
				var habit ='';
				for(var i=0;i<thabit.length-1;i++){
					habit = habit + thabit[i]+" ";
				}
				habit = habit + thabit[thabit.length-1];
				return habit;
			}
			
			function getAddress(myselect){		
				var index = myselect.selectedIndex;
				var address = myselect.options[index].value;
				return address;
			}
			
			function testdel(obj) {
				var tr = obj.parentNode.parentNode;	//	parentNode	上一级节点
				if(confirm("是否删除该行记录？")) {
					document.getElementById("tbody").removeChild(tr);
				}
			}
			function testupdate(obj){
				var tdthis = obj.parentNode;
				var tdaddress = tdthis.previousSibling;	
				var tdhabit = tdaddress.previousSibling;
				var tdsex = tdhabit.previousSibling;
				var tdname = tdsex.previousSibling;
				var tdid = tdname.previousSibling;
				var tmp1='';
				var temp1= '';
				for(var i=0,j=0;i<myselect.options.length;i++){
					if(tdaddress.innerHTML == myselect.options[i].value){
						temp1 = 'selected';
					}else{
						temp1='';
					}
					tmp1=tmp1+"<option "+temp1+" >"+myselect.options[i].value+"</option>";
				}
			
				var tmp2 = '';
				var temp2 = '';
				var thabit = tdhabit.innerHTML.split(" ");
				for(var i = 0;i<checkboxs.length;i++){
					for(var j=0;j<thabit.length;j++){
						if(checkboxs[i].value==thabit[j]){
							temp2 = 'checked';
							break;
						}else{
							temp2 = '';
						}
					}
					tmp2 = tmp2 + "<input type='checkbox' name='tHabit"+tdid+"' id='tHabit"+i+1+"' value='"+checkboxs[i].value+"' "+temp2+" /><label for='tHabit"+i+1+"'>"+checkboxs[i].value+"</label>";
				}
				
				var tmp3='';
				var temp3='';
				for(var i = 0;i<radios.length;i++){
					if(radios[i].value==tdsex.innerHTML){
						temp3='checked';
					}else{
						temp3='';
					}
					tmp3=tmp3+"<input type='radio' name='tSex"+tdid+"' id='sex"+i+1+"' "+temp3+" value='"+radios[i].value+"'/><label for='sex"+i+1+"'>"+radios[i].value+"</label>"
				}
				
				tdaddress.innerHTML="<select id='tAddress"+tdid+"'>  " + tmp1 + "  </select>";
				tdhabit.innerHTML=tmp2;
				tdsex.innerHTML=tmp3;
				tdname.innerHTML="<input type='text' id='tName" + tdid + "' value='" + tdname.innerHTML+ "'/>";
				tdthis.innerHTML = "<a href='javascript:;'>保存</a>";					
			
			tdthis.getElementsByTagName("a")[0].onclick = function(){
				if(confirm("是否完成该行记录的修改？")) {
					tdaddress.innerHTML = getAddress(document.getElementById('tAddress'+tdid));
					tdhabit.innerHTML = getHabit(document.getElementsByName('tHabit'+tdid));
					tdsex.innerHTML = getSex(document.getElementsByName('tSex'+tdid));
					tdname.innerHTML = document.getElementById('tName'+tdid).value;
					tdthis.innerHTML = "<a href ='javascript:;' onclick='testdel(this)'>删除</a> <a href ='javascript:;' onclick='testupdate(this)'>修改</a></td>";
				}
			}
			
			}
	
			
			
			function testselect(){
				var trs = document.getElementsByTagName("tr");
				var len = trs.length;
				
				for(var i = 1;i<len; i++){
					trs[i].removeAttribute('style');
				}
				
				var name = document.getElementById("name2").value;
				var myselect = document.getElementById("address2");
				var index = myselect.selectedIndex;
				var address = myselect.options[index].value;
				
				if(name == ''||address== ''){
					return;
				}
				// cells 单元格
				for(var i = 1;i<len; i++){
					var tname = trs[i].cells[1].innerHTML;
					var taddress = trs[i].cells[4].innerHTML;
					// if(tname == v3) 全匹配
					if(tname.indexOf(name)>-1){	
						if(taddress.indexOf(address)>-1)
							trs[i].style.backgroundColor = 'green';
					}
				}
			}
			
			
		</script>
		
	</body>
</html>
